<template>
  <div style="height: 100%;padding: 20px;text-align: right">
    <div class='msg' ref="bubble">
      {{ content }}
    </div>
    <div class="avatar_part">
      <el-avatar :src="avatarImg"/>
    </div>
  </div>
</template>

<script>
import avatar from "@/assets/img/avatar.jpeg"

export default {
  name: "LeftBubble",
  props: {
    maxWidth: {
      type: String,
      default: "300px"
    },
    content: {
      type: String,
    }
  },
  mounted() {
    this.$refs.bubble.style.setProperty("max-width", this.maxWidth);
  },
  data() {
    return {
      avatarImg: "https://edu-yc.oss-cn-beijing.aliyuncs.com/config/821c2b965b9e80aeb61af9d02d6896b1.jpg"
    }
  }
}
</script>

<style scoped>
div:first-child {
  vertical-align: top;
}

.msg {
  display: inline-block;
  margin-right: 20px;
  min-height: 20px;
  min-width: 20px;
  padding: 8px;
  border-radius: 10px;
  background: limegreen;
  word-wrap: break-word;
  text-align: left;
}

.avatar_part {
  margin-top: 3px;
  display: inline-block;
}

</style>
